import 'package:flutter/material.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/ui/pay/pay_viewmodel.dart';
import 'package:gold/utils/res.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/xfg_text.dart';
import 'package:provider/provider.dart';

/// @description: 商品支付页面
/// @author tangzhentao
/// @created at 22:39 2025/2/15

class PayPage extends StatelessWidget {
  /// 订单id
  final int id;
  /// 订单类型 商品，黄金投资，积分
  final String type;
  /// 金额
  final double amount;
  /// 是否来自订单
  final bool fromOrder;
  /// 订单创建时间
  final String? createAt;

  const PayPage({super.key, required this.type, required this.id, required this.amount, this.createAt, this.fromOrder = false});

  @override
  Widget build(BuildContext context) {
    return ProviderScaffold<PayViewmodel>(
      model: PayViewmodel(id, type, fromOrder, createAt),
      appBar: (_) => xfgAppbar(title: '支付订单'),
      builder: (ctx, pay) => Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(height: XfgSize().size50),
          Builder(builder: (con) {
            final time = con.select<PayViewmodel, int>((k) => k.payTime);
            return XfgText('支付剩余时间 ${_getTimeDesc(time)}', fontSize: XfgSize().text14, color: XfgColor.text3);
          }),
          SizedBox(height: XfgSize().size28),
          XfgText('¥', fontSize: XfgSize().text20, color: XfgColor.text1D, children: [
            TextSpan(text: amount.toStringAsFixed(2), style: TextStyle(fontSize: XfgSize().text40, fontWeight: FontWeight.bold))
          ]),
          SizedBox(height: XfgSize().size64),
          Builder(builder: (con) {
            final isWechat = con.select<PayViewmodel, bool>((k) => k.isWechat);
            return _typeWidget('微信', Res.imagesPayWechat, isWechat, onTap: () {
              if (!isWechat) pay.changeType();
            });
          }),
          SizedBox(height: XfgSize().size10),
          Builder(builder: (con) {
            final isWechat = con.select<PayViewmodel, bool>((k) => k.isWechat);
            return _typeWidget('支付宝', Res.imagesPayAli, !isWechat, onTap: () {
              if (isWechat) pay.changeType();
            });
          }),
          const Spacer(),
          TextButton(
            onPressed: pay.confirmPay,
            style: xfgButtonStyle(Size(XfgSize().size342, XfgSize().size50), radius: XfgSize().size50),
            child: XfgText('确认支付', fontSize: XfgSize().text20, color: XfgColor.white),
          ),
          SizedBox(height: XfgSize().bottomBarHeight + XfgSize().size16)
        ],
      ),
    );
  }

  /// 支付方式
  Widget _typeWidget(String text, String image, bool select, {GestureTapCallback? onTap}) => Container(
    margin: EdgeInsets.symmetric(horizontal: XfgSize().size10),
    child: Ink(
      decoration: white6Decoration,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(XfgSize().size6),
        child: Padding(
          padding: EdgeInsets.fromLTRB(XfgSize().size12, XfgSize().size20, XfgSize().size12, XfgSize().size24),
          child: Row(
            children: [
              Expanded(
                child: Column(
                  children: [
                    Row(
                      children: [
                        Image.asset(image, width: XfgSize().size24, height: XfgSize().size24),
                        SizedBox(width: XfgSize().size8),
                        Expanded(child: XfgText('$text支付', fontSize: XfgSize().text18, color: XfgColor.text1D, bold: FontWeight.bold))
                      ],
                    ),
                    SizedBox(height: XfgSize().size10),
                    Row(
                      children: [
                        SizedBox(width: XfgSize().size32),
                        Expanded(child: XfgText('使用$text支付', fontSize: XfgSize().text14, color: XfgColor.text3))
                      ],
                    ),
                  ],
                ),
              ),
              Image.asset(select ? Res.imagesPayRadioS:Res.imagesPayRadio, width: XfgSize().size24, height: XfgSize().size24)
            ],
          ),
        ),
      ),
    ),
  );

  /// 获取时间描述 示例：14:34
  String _getTimeDesc(int seconds) {
    final minutes = seconds ~/ 60;
    final second = seconds % 60;
    return '${minutes > 9 ? '$minutes':'0$minutes'}:${second > 9 ? '$second':'0$second'}';
  }
}
